<template>
  <a-modal v-model="visible" :footer="null" title="公众号商城资质" width="40%">

    <a-spin :spinning="confirmSpin">
      <a-form-model
        ref="form"
        :model="configData"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol">


        <a-form-model-item label="公众号的appid" prop="configs">
          <a-input v-model="configData.configs[0].appId" placeholder="请输入公众号的appid" :style="{color:'black'}"
                   :disabled="disable"/>
        </a-form-model-item>

        <a-form-model-item label="公众号的secret" prop="configs">
          <a-input v-model="configData.configs[0].secret" placeholder="请输入公众号的secret" :style="{color:'black'}"
                   :disabled="disable"/>
        </a-form-model-item>

        <a-form-model-item label="公众号的token" prop="token">
          <a-input v-model="configData.configs[0].token" placeholder="请输入公众号的token(可以不填)" :style="{color:'black'}"
                   :disabled="disable"/>
        </a-form-model-item>

        <a-form-model-item label="公众号的aesKey" prop="aesKey">
          <a-input v-model="configData.configs[0].aesKey" placeholder="请输入公众号的aesKey(可以不填)" :style="{color:'black'}"
                   :disabled="disable"/>
        </a-form-model-item>


        <a-form-model-item label="接口域名" prop="redirectUri">
          <a-input v-model="configData.redirectUri" placeholder="请输入个推appId" :style="{color:'black'}"
                   :disabled="disable"/>
        </a-form-model-item>

        <a-form-model-item label="H5访问地址" prop="redirectEnd">
          <a-input v-model="configData.redirectEnd" placeholder="请输入个推appKey" :style="{color:'black'}"
                   :disabled="disable"/>
        </a-form-model-item>

        <a-form-model-item label="是否开启Redis" prop="useRedis">
          <a-switch  v-model="configData.useRedis" checked-children="开" un-checked-children="关" default-checked :disabled="disable" />
        </a-form-model-item>




        <a-form-model-item :wrapper-col="{ span: 14, offset: 7 }" v-if="!disable">
          <a-button type="primary" style="width:100px;" @click="onSubmit" v-if="isVerify==true">
            修改
          </a-button>
          <a-button type="primary" style="width:100px;" @click="verifySubmit" v-else>
            验证
          </a-button>
          <a-button style="margin-left: 20px;width:100px;" @click="resetForm">
            重置
          </a-button>
        </a-form-model-item>

      </a-form-model>
    </a-spin>
  </a-modal>
</template>
<script>
import {getAction, postAction, putAction} from "@/api/manage";
import {BoneCommonMixin} from "@/mixins/BoneCommonMixin";
import {ConfigDictMixins} from "@views/gospel/configCenter/mixins/ConfigDictMixins";

export default {
  name: "WxMpModel",
  mixins: [BoneCommonMixin, ConfigDictMixins],
  components: {},
  data() {
    return {
      description: "个推.信息推送配置框",
      rules: {
        redirectUri: [
          {required: true, message: '请输入enable', trigger: 'blur'},
        ],
        redirectEnd: [
          {required: true, message: '请输入appKey', trigger: 'blur'},
        ],
        configs: [
          {required: true, message: '请输入appId', trigger: 'blur'},
        ],
      },
      type: "wxMpConfig",
      configData: {
        "redirectUri":"",
        "redirectEnd":"",
        "useRedis":true,
        "configs":[{
          "appId":"",
          "secret":"",
          "token":"",
          "aesKey":""
        }],
      },
      url: {
        configUpdate: "/config/push",
        verifyUrl:"/cmsConfigVerify/wechat-app"
      },
      isVerify:false
    }
  },
  methods:{
    verifySubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.confirmSpin = true;
          console.log("提交表单信息", this.configData);
          postAction(this.url.verifyUrl, this.configData).then(res => {
            if (res.success) {
              this.isVerify = true;
              this.showSuccess(res.message);
            } else {
              this.isVerify = false;
              this.showError(res.message);
            }
          }).finally(() => {
            this.confirmSpin = false;

          });
        } else {
          this.showWarn("请参考接入文档");
        }
      });
    }
  },
  watch:{
    "configData.redirectUri":{
      deep:true,
      handler(value)
      {
        this.isVerify = false;
      }
    },
    "configData.redirectEnd":{
      deep:true,
      handler(value)
      {
        this.isVerify = false;
      }
    },
    "configData.token":{
      deep:true,
      handler(value)
      {
        this.isVerify = false;
      }
    },
    "configData.configs":{
      deep:true,
      handler(value)
      {
        this.isVerify = false;
      }
    },
    "configData.useRedis":{
      deep:true,
      handler(value)
      {
        this.isVerify = false;
      }
    }
  }
}
</script>

<style scoped>

</style>